<?php use_javascript('https://www.google.com/jsapi') ?>

<?php $visitors_out = sfOutputEscaperArrayDecorator::unescape($visitors_out); ?>
<?php $sites_visitors_out = sfOutputEscaperArrayDecorator::unescape($sites_visitors_out); ?>

<?php //var_dump($sites_visitors_out) ?>

<div id="chart_div"></div>
<br /><br />
<div id="chart_div_2"></div>

<script type="text/javascript">
  // Load the Visualization API and the piechart package.
  google.load('visualization', '1', {'packages':['corechart']});
  
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);
  
  // Callback that creates and populates a data table, 
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {
  
    // Create our data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Day');
    data.addColumn('number', 'Visitors out');
    data.addRows(<?php echo count(array_keys($visitors_out)) ?>);
    <?php $i = 0 ?>
    <?php foreach(array_keys($visitors_out) as $key): ?>
      <?php if ($group == 'day'): $key = date('d M', strtotime($key)); endif; ?>
      <?php if ($group == 'month'): $key = date('M', strtotime($key)); endif; ?>
      data.setValue(<?php echo $i ?>,0, '<?php echo $key ?>');
      <?php $i++ ?>
    <?php endforeach; ?>
  <?php
    $i = 0;
    foreach ($visitors_out as $key => $value):
  ?>
      data.setValue(<?php echo $i; ?>, 1, <?php echo number_format($visitors_out[$key], 2, '.', ''); ?>);
      <?php     ++$i; ?>
  <?php endforeach; ?>
  
    var options = {
      width: 780,
      height: 300,
      hAxis: {slantedText: true, slantedTextAngle: 45},
      legend: 'top',
      fontSize: 12,
      chartArea: {width: 680}
    }
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

<script type="text/javascript">
  // Load the Visualization API and the piechart package.
  google.load('visualization', '1', {'packages':['corechart']});
  
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);
  
  // Callback that creates and populates a data table, 
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {
  
    // Create our data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Day');
    <?php foreach($sites_visitors_out as $site_id => $values): ?>
    data.addColumn('number', '<?php echo $site_id ?>');
    <?php endforeach; ?>
    <?php foreach($sites_visitors_out as $site_id => $values): ?>
    data.addRows(<?php echo count(array_keys($values)) ?>);
    
    <?php $i = 0 ?>
    <?php foreach(array_keys($values) as $key): ?>
      <?php if ($group == 'day'): $key = date('d M', strtotime($key)); endif; ?>
      <?php if ($group == 'month'): $key = date('M', strtotime($key)); endif; ?>
      data.setValue(<?php echo $i ?>,0, '<?php echo $key ?>');
      <?php $i++ ?>
    <?php endforeach; ?>
    
    <?php break; ?>
    <?php endforeach; ?>
    
  <?php
    $i = 1;
    foreach($sites_visitors_out as $site_id => $values):
      $j = 0;
      foreach($values as $key => $value):
  ?>
      data.setValue(<?php echo $j; ?>, <?php echo $i; ?>, <?php echo number_format($value, 2, '.', ''); ?>);
      <?php ++$j; ?>
      <?php endforeach; ?>
      <?php ++$i; ?>
  <?php endforeach; ?>
  
    var options = {
      width: 780,
      height: 300,
      hAxis: {slantedText: true, slantedTextAngle: 45},
      legend: 'top',
      fontSize: 12,
      chartArea: {width: 680}
    }
    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.LineChart(document.getElementById('chart_div_2'));
    chart.draw(data, options);
  }
</script>